{extend name='app' /}
{block name='title'}首页装修{/block}

{block name="stylesheet"}
<style>
    .progress{
        margin-top:2px;
        width: 200px;
        height: 14px;
        margin-bottom: 10px;
        overflow: hidden;
        background-color: #f5f5f5;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
        box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    }
    .progress-bar{
        background-color: rgb(92, 184, 92);
        background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.14902) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.14902) 50%, rgba(255, 255, 255, 0.14902) 75%, transparent 75%, transparent);
        background-size: 40px 40px;
        box-shadow: rgba(0, 0, 0, 0.14902) 0px -1px 0px 0px inset;
        box-sizing: border-box;
        color: rgb(255, 255, 255);
        display: block;
        float: left;
        font-size: 12px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        transition-delay: 0s;
        transition-duration: 0.6s;
        transition-property: width;
        transition-timing-function: ease;
        width: 266.188px;
    }
</style>

{/block}


{block name="breadcrumb"}
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>首页装修</h2>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a>系统设置</a>
            </li>
            <li class="breadcrumb-item active">
                <strong>首页装修</strong>
            </li>
        </ol>
    </div>
</div>
{/block}


{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">

                <div class="ibox-content">

                    <div class="row">
                        <div class="col-sm m-b-sm">
                               <span class="float-left">
                                    <button class="btn btn-primary btn-sm" type="button"
                                            onclick="get_html($(this),'{$Think.config.admin.app_host}/admin/renovation/create')"><i
                                            class="fa fa-plus"></i>&nbsp;添加
                                    </button>
                                </span>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>定位</th>
                                <th>图片</th>
                                <th>链接</th>
                                <th width="100">排序</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {foreach $list as $index => $item}
                            <tr>
                                <td>{++$index}</td>
                                <td>{$item->name}</td>
                                <td>{if !empty($item->image)}<img src="{$item->image}" alt="" width="40" class="rounded img-md">{/if}</td>
                                <td>{$item->video}</td>
                                <td>
                                    <input type="text" class="form-control table-input" value="{$item->sort}" onchange="change_data('{$Think.config.admin.app_host}/admin/renovation/renew/{$item->id}',{sort:$(this).val()})">
                                </td>
                                <td>
                                    <input type="checkbox" class="js-switch" {if $item->status == 1} checked {/if}
                                    onchange="change_status($(this),'{$Think.config.admin.app_host}/admin/renovation/renew/{$item->id}')"/>
                                </td>
                                <td>
                                    <button class="btn btn-info btn-xs" type="button" onclick="get_html($(this),'{$Think.config.admin.app_host}/admin/renovation/{$item->id}/edit')"><i class="fa fa-pencil"></i>&nbsp;编辑
                                    </button>
                                    <button class="btn btn-danger btn-xs" type="button" onclick="delete_form($(this),'{$Think.config.admin.app_host}/admin/renovation/{$item->id}')"><i class="fa fa-trash"></i>&nbsp;删除
                                    </button>
                                </td>
                            </tr>
                            {/foreach}
                            </tbody>
                        </table>
                        <div class="float-right">
                            {$list|raw}
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
{/block}


{block name="script"}


<script>
    let switchery_arr = [];
    let elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
    elems.forEach(function (value, index) {
        let switchery = new Switchery(value, {color: '#1AB394', size: 'small'});
        switchery_arr.push(switchery);
    });

    function change_status(that, url) {
        // 获取当前checkbox的switchery 对象
        var index = $('.js-switch').index(that);
        let switchery = switchery_arr[index];
        var status = 0;
        if(switchery.isChecked() == true){
            status = 1;
        }
        let response = post_request(url, {'status': status});
        if (response.status == 1) {
            show_tip('提示', response.msg, 'success');
        } else {
            show_tip('提示', response.msg, 'error');

            // 获取当前复选框的状态，并保持未change时的状态
            let status = that.prop("checked")
            if (status == false) {
                setSwitchery(switchery, true);
            } else {
                setSwitchery(switchery, false);
            }
        }
    }


    // 修改 checkbox 状态
    function setSwitchery(switchElement, checkedBool) {
        if ((checkedBool && !switchElement.isChecked()) || (!checkedBool && switchElement.isChecked())) {
            switchElement.setPosition(true);
            // switchElement.handleOnchange(true);
        }
    }
</script>
{/block}
